<template>
  <div class="app-container">
    <el-form ref="form" class="videoForm" :rules="rules" :model="form" label-width="130px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>录像参数</span>
        </div>
        <div class="text item">

            <el-form-item label="录像使能">
              <el-switch v-model="form.recordEnable"></el-switch>
            </el-form-item>
            <el-form-item label="录像提前时间(秒)" prop="recordTime">
              <el-col :xs="12" :sm="6" :md="6" :lg="3" :xl="3">
                <el-tooltip class="item" effect="dark" content="0 ~ 10秒" placement="top-start">
                  <el-input v-model="form.recordTime"></el-input>
                </el-tooltip>
              </el-col>
            </el-form-item>
            <el-form-item label="录像触发事件">
              <el-col>
                <el-checkbox-group v-model="form.recordEventArr"  @change="handleCheckedChange">
                  <el-checkbox v-for="item in form.recordEventItem" :value="item.value" :label="item.value" :key="item.value">{{item.title}}</el-checkbox>
                </el-checkbox-group>
              </el-col>
            </el-form-item>
        </div>
      </el-card>
      <el-form-item class="saveView">
        <el-button type="primary" @click="setrecordinfo">保存</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
    export default {
        name: "videoConfig",
      data:function () {
        var checkSecond = (rule, value, callback) => {
          var regExp=/^[0-9]+$/
          if (value === '') {
            callback(new Error('请输入录像提前时间'));
          } else if(!regExp.test(value)||value<0||value>10){
            callback(new Error('只能输入0 ~ 10之间的数字'));
          }else{
            callback();
          }
        }
        return{
          form: {
            recordEnable: false,
            recordTime: 0,
            recordEventArr:[],
            recordEvent:0,
            recordEventItem:[
                {
                  value:1,
                  title:'通行'
                },
                {
                  value:2,
                  title:'绕行'
                },
                {
                  value:4,
                  title:'尾随'
                },
                {
                  value:8,
                  title:'翻越'
                },
              ]
          },
          rules: {
            recordTime: [
              { validator: checkSecond,required: true, trigger: 'blur' }
            ]
          }
        }
      },methods:{
        handleCheckedChange:function(value){
          this.form.recordEvent=0
          for(var item in value){
            // debugger
            this.form.recordEvent+=value[item]

          }
          console.log(this.form.recordEvent);
        },
        getrecordinfo:function(){
          var _this=this
          _this.postAjax({
            method:'getrecordinfo',
            params:{}
          }).then(function (res) {
            console.log(res);
            if(res.result==0){
              var data=res.params
              // debugger
              _this.form.recordTime=data.recordTime
              _this.form.recordEnable=data.recordEnable==1?true:false

              if(data.recordEvent!=0){
                for(var i=0;i<_this.form.recordEventItem.length;i++){
                  if((data.recordEvent & _this.form.recordEventItem[i].value)==_this.form.recordEventItem[i].value){
                    _this.form.recordEventArr.push(_this.form.recordEventItem[i].value)
                  }
                }
              }
              // debugger
              console.log(113,_this.form.recordEventArr);

            }else{
              _this.tips(res.errorInfo.detail,'error')
            }
          }).catch(function (err) {
            console.log(err);
          }).finally(function (fn) {
            console.log(fn);
          })
        },
        setrecordinfo:function () {
          this.form.recordEvent=0
          if(this.form.recordEventArr.length){
            for(var i=0;i<this.form.recordEventArr.length;i++){
              this.form.recordEvent+=this.form.recordEventArr[i]
            }
          }
          console.log(this.form.recordEvent);
          console.log(this.form.recordEventArr);
          this.$refs['form'].validate((valid) => {
            if (valid) {
              var _this=this
              _this.loading=true
              _this.postAjax({
                method:'setrecordinfo',
                params:{
                  recordTime:parseInt(_this.form.recordTime),
                  recordEnable:_this.form.recordEnable?1:0,
                  recordEvent:_this.form.recordEvent
                }
              }).then(function (res) {
                console.log(res);
                if(res.result==0){
                  _this.tips('保存成功','success')
                  // var data=res.params
                  // // debugger
                  // _this.form.ip=data.ip
                  // _this.form.gateway=data.gateway
                  // _this.form.mask=data.mask
                  // _this.form.dns1=data.dns1
                  // _this.form.dns2=data.dns2
                }else {
                  _this.tips(res.errorInfo.detail,'error')
                }
              }).catch(function (err) {
                console.log(err);
              }).finally(function (fn) {
                _this.loading=false
                console.log(fn);
              })
            }else{
              return false;
            }
          })
        }
      },mounted:function () {
        this.getrecordinfo()
      }
    }
</script>

<style scoped>
  .videoForm .saveView >>> .el-form-item__content {
    margin-left:0px !important;
  }
.box-card{
  margin-bottom: 20px;
}
</style>
